import React, {Component} from 'react'
import {Form, Input, Button} from 'element-react'

class Register extends Component {
    constructor(props) {
        super(props)
        this.state = {
            buttonStyle:{
                width:"100%"
            },
            form: {
                name: null,
                password: null,
                password2:''
            },
            rules: {
                name: [{required: true, message: '请输入账号', trigger: 'blur'}],
                password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                password2: [{required: true, message: '请输入密码', trigger: 'blur'},
                    { validator: (rule, value, callback) => {
                            if (value === '') {
                                callback(new Error('请再次输入密码'));
                            } else if (value !== this.state.form.password) {
                                callback(new Error('两次输入密码不一致!'));
                            } else {
                                callback();
                            }
                        } }]
            }
        }
    }
    render() {
        return (
            <div className='login'>
                <div className='l-header'>
                    <p className='title'>注册</p>
                    <p className='sub-title'>
                        因为有你，世界更精彩
                    </p>
                </div>
                <div className='l-body'>
                    <Form ref="form"  labelWidth='80' model={this.state.form}  rules={this.state.rules}>
                        <Form.Item label='账号' prop='name'>
                            <Input value={this.state.form.name} onChange={this.handleChange.bind(this, 'name')}/>
                        </Form.Item>
                        <Form.Item label='密码' prop='password'>
                            <Input value={this.state.form.password}
                                   onChange={this.handleChange.bind(this, 'password')}/>
                        </Form.Item>
                        <Form.Item label='确认密码' prop='password2'>
                            <Input value={this.state.form.password2}
                                   onChange={this.handleChange.bind(this, 'password2')}/>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" style={this.state.buttonStyle} onClick={this.submit.bind(this)}>注册</Button>
                        </Form.Item>
                    </Form>

                </div>
                <div className='l-footer'>
                    <div className='sigin-switch'>
                        已有账号？<span onClick={this.handleResgaster.bind(this)}>登陆</span>
                    </div>
                </div>
            </div>
        )
    }

    handleChange(key, value) {
        this.setState({
            form: Object.assign({}, this.state.form, {[key]: value})
        })
    }


    submit(e) {
        e.preventDefault();
        this.refs.form.validate((valid) => {
            console.log(valid)
            if (valid) {
                console.log(this.state.form)
            } else {

                return false;
            }
        });
    }

    handleResgaster() {
        this.props.handleResgister(true)
    }


}

export default Register